<template>
	<view>
	<custom-navbar :title="filterTitle()"></custom-navbar>
	<view class="bookArea">
		<view class="sendBook">
			<CardWrap>
				<view class="title">发送文书</view>
				<text class="rule">支持pdf/ofd/png/jpg格式，大小不超过100M</text>
				<process-wrap :fileListInfo="fileListInfo[0]" :documentType="0"></process-wrap>
			</CardWrap>
			<CardWrap>
				<view class="title">送达回证</view>
				<text class="rule">支持doc格式，大小不超过100M</text>
				<process-wrap :fileListInfo="fileListInfo[1]" :documentType="1" :deliveryReceiptList="['docx']">
				</process-wrap>
			</CardWrap>
			<CardWrap>
				<view class="title">受送达人</view>
				<view class="formWrap">
					<uni-forms :modelValue="formData">
						<uni-forms-item label="单位" name="recipientUnit" required>
						  <uni-data-select
							v-model="formData.recipientUnit"
							:localdata="unitList"
							placeholder="请选择单位"
							@change="unitChange"
						  ></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="部门" name="recipientDept" required>
						  <uni-data-select
							v-model="formData.recipientDept"
							:localdata="apartmentList"
							@change="apartChange"
							placeholder="请选择部门"
						  ></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="联系人" name="contact" required>
						  <uni-data-select
							v-model="formData.contact"
							:localdata="userList"
							@change="userChange"
							placeholder="请选择联系人"
						  ></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="备用联系人" name="backupContact" label-width="120">
						<uni-easyinput type="text" v-model="formData.backupContact" placeholder="请输入备用联系人姓名" :inputBorder="false" :clearable="false"/>
						</uni-forms-item>
						<uni-forms-item label="联系方式(手机号码)" name="phoneNumber" required label-width="100">
						<uni-easyinput type="number" v-model="formData.phoneNumber" placeholder="请选择联系方式" :inputBorder="false" :clearable="false"/>
						</uni-forms-item>
					</uni-forms>
				</view>

			</CardWrap>
			<CardWrap v-if="documentType !== '2'">
				<view class="title">备案</view>
				<view class="lawVisible">
					<text>是否司法局可见</text>
					<uni-data-checkbox v-model="formData.LawVisible" :localdata="isLawVisibleList" />
				</view>
			</CardWrap>
			<view class="sendBtn"  @tap="submitForm">
				确认发送
			</view>
		</view>
	</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import {onLoad} from '@dcloudio/uni-app'
import {useProcessStore} from'@/store/index.js'
import {useClearProcess} from '@/hooks/useClearProcess.js'
import {getUnitList,getDeptListByUnitId,getUserListByUnitId,saveDocument} from '@/api/option.js'
const processStore = useProcessStore()
const documentType = ref(null)
onLoad((data)=>{
	const {type} = data
	documentType.value = type
	useClearProcess()
	init()
})
const filterTitle = ()=>{
	let str = ""
	switch(documentType.value){
		case '1':
		str = "检察建议书"
		break;
		case '2':
		str = "检察意见书"
		break;
		case '3':
		str = "磋商文书"
		break;
	}
	return str
}
	// 文件上传列表配置
	const fileListInfo = [
		[{uploadType:"file"},{uploadType:"image"}],[{uploadType:"file"}],
	]
	// 获取单位列表
	const unitList = ref([])
	const init = async()=>{
		try{
			const {code,data} = await getUnitList()
			if(code === 200){
				unitList.value = middleWare(data)
			}
		}catch(e){
			//TODO handle the exception
		}
	}
	// 获取部门列表
	const apartmentList = ref([])
	const unitChange= async(val)=>{
	formData.unitName = unitList.value.reduce((curr,item)=>{
		if(item.value === val){
			curr+= item.text
		}
		return curr
	},"")	
	const {code,data} = await getDeptListByUnitId({
			unitId:val
		})
		if(code === 200){
		 apartmentList.value = middleWare(data)
		}
	}
	// 获取单位名下列表
	const userList = ref([])
	const apartChange = async(val)=>{
		formData.deliveryDeptName = apartmentList.value.reduce((curr,item)=>{
			if(item.value === val){
				curr+= item.text
			}
			return curr
		},"")	
	const {code,data} = await getUserListByUnitId({
			unitId:val
		})
		if(code === 200){
			userList.value = middleWare(data,true)
		}
	}
	// 触发用户下拉框列表
	const userChange = (val)=>{
		console.log("此时的值是什么",val);
	}
	const middleWare = (list,flag)=>{
		return list.map(val=>{
			return {
				value:flag ? val.userid : val.id ,
				text:val.name
			}
		})
	}
	const formData = reactive({
		fileOssIds:[], //送出文件图片的文件ossId 列表
		proofService:"",  //送达回证文件
		deliveryType:"", //送达文件类型
		recipientUnit:"",//受送达人-单位
		unitName:"", //送达单位名称
		recipientDept:"",//受送达人-部门
		deliveryDeptName:"", //送达部门名称
		contact:"", //受送达人-联系人
		backupContact:"", //备用联系人姓名
		phoneNumber:"", //联系方式
		LawVisible:0 //是否司法局可见（0不可见 1可见）
	})
	// 是否司法局可见（0不可见 1可见）
	const isLawVisibleList = ref([
		{text:"否",value:0},
		{text:"是",value:1},
	])

	// 提交建议书
	const submitForm = async()=>{
	//文件类型
	formData.deliveryType = documentType.value
	 // 发送文书列表
	 formData.fileOssIds = processStore.processPingList[0].reduce((curr,val)=>{
		 curr.push(val.ossId)
		 return curr
	 },[])
	 // 送达回证
	 formData.proofService = processStore.processPingList[1].reduce((curr,val)=>{
		 curr += val.ossId
		 return curr
	 },"")
	 if(!formData.fileOssIds.length) return uni.showToast({
	 	icon:"error",
		title:"请上传发送文书"
	 })
	 if(!formData.proofService) return uni.showToast({
	 	icon:"error",
	 		title:"请上传送达回证"
	 })
	 if(formData.recipientUnit === "" || formData.recipientDept === "" || formData.contact === "" || formData.phoneNumber === ""){
		 return uni.showToast({
			icon:"error",
	 		title:"受送达人红色*必填！"
	 })
	 }
	 let phoneRule = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/
	 if(!phoneRule.test(formData.phoneNumber)){
		 return uni.showToast({
			icon:"error",
	 		title:"手机号码格式不正确"
			})
	 }
	 // 提交填写内容
	const {code,data:res} = await saveDocument(formData)
	if(code === 200){
		if(res){
			uni.showToast({
				icon:"success",
				title:"发送成功！",
				duration:1000,
				complete() {
					uni.navigateBack()
				}
			})
		}else{
			uni.showToast({
				icon:"error",
				title:"发送失败！"
			})
		}
	}else{
		uni.showToast({
			icon:"error",
			title:"发送失败！"
		})
	}
	}
</script>

<style lang="scss" scoped>
.bookArea{
	background-color: #F5FAFF;
	min-height: 100vh;
	.sendBook{
		padding: 32rpx;
		.title{
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #00041A;
			margin-bottom: 10rpx;
		}
		.rule{
			font-weight: 400;
			font-size: 24rpx;
			color: #BBC0C9;
		}
		.lawVisible{
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			text{
				font-weight: 400;
				font-size: 28rpx;
				color: #66686A;
				margin-right: 20rpx;
			}
		}
		.formWrap{
		}
		.sendBtn{
			height: 100rpx;
			border-radius: 16rpx;
			text-align: center;
			line-height: 100rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #FFFFFF;
			background: #0D53FE;
			margin-bottom: 100rpx;
		}
		.sendActive {
			background: #0D53FE !important;
		}
		:deep(.uni-easyinput__content-input) {
			text-align: right;
		}
		:deep(.uni-select){
			border:none;
			border-bottom:none;
		}
		:deep(.uni-forms-item){
			border-bottom: 1rpx solid #F5FAFF;
		}
		:deep(.uni-select__input-text ){
			padding-left: 10rpx;
			text-align: right;
			&:placeholder{
				font-size: 28rpx;
				color: #fefefe;
			}
		}
		:deep(.is-required){
			order: 2;
		}
	}
}

</style>
